<template>
  <div
      style="padding: 10px; overflow: auto"
      :class="$store.getters.isMobile ? 'mobile-W' : ''"
  >
    <a-tabs
        v-model:activeKey="activeKey"
        style="background: #ffff; height: 100%"
        :size="$store.getters.isMobile ? 'small' : 'default '"
    >

      <template #rightExtra>
        <a-button
            type="primary"
            v-if="!$store.getters.isMobile"
            ghost
            @click="showQrModel"
        >查看渠道入口二维码
        </a-button
        >
      </template>

      <a-tab-pane key="info" tab="渠道信息">
        <ChannelInfo
            :activeKey="activeKey"
            @numChange="numChange"
            :sourceOptions="sourceOptions"
            :optionsBuild="optionsBuild"
        />
      </a-tab-pane>

      <a-tab-pane key="review" :tab="numTitle">
        <ChannelReview
            :activeKey="activeKey"
            @numChange="numChange"
            :sourceOptions="sourceOptions"
        />
      </a-tab-pane>

      <a-tab-pane key="type" tab="渠道类型">
        <ChannelType :activeKey="activeKey"/>
      </a-tab-pane>

      <a-tab-pane key="blacklist" tab="黑名单" @numChange="numChange">
        <ChannelBlack :activeKey="activeKey" :sourceOptions="sourceOptions"/>
      </a-tab-pane>
    </a-tabs>

    <!-- 二维码 -->
    <a-modal
        v-model:visible="qrVisible"
        title="渠道入口二维码"
        :width="'500px'"
        :footer="null"
    >
      <a-row :gutter="10">
        <a-col :span="11" class="text-center">
          <QrcodeVue
              v-if="qrType == 1"
              :value="qrChannel"
              :size="150"
              class="code"
              style="margin: 10px auto"
          />
          <a-image
              v-if="qrType == 2"
              width="150"
              :src="qrChannel"
              style="margin: 10px auto"
          />
          <div>个人渠道注册二维码</div>
          <a-button type="primary" ghost class="mt-5" size="small" @click="downloadCode(1)">
            下载二维码
          </a-button>
        </a-col>
        <a-divider type="vertical" style="height: 150px;width: 2px"/>
        <a-col :span="11" class="text-center">
          <QrcodeVue
              v-if="qrChannelType == 1"
              :value="qrChannelCompany"
              :size="150"
              class="code"
              style="margin: 10px auto"
          />
          <a-image
              v-if="qrChannelType == 2"
              width="150"
              :src="qrChannelCompany"
              style="margin: 10px auto"
          />
          <div>渠道公司申请二维码</div>
          <a-button type="primary" ghost class="mt-5" size="small" @click="downloadCode(2)">
            下载二维码
          </a-button>
        </a-col>
      </a-row>
    </a-modal>

  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  createVNode,
  watch,
  computed,
  reactive,
} from "vue";
import {Statistic} from "ant-design-vue";
import ChannelManagemntEdit from "./modules/ChannelManagemntEdit.vue";
import request from "../../../common/utils/request";
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import ChannelType from "./modules/ChannelType.vue";
import ChannelInfo from "./modules/ChannelInfo.vue";
import ChannelReview from "./modules/ChannelReview.vue";
import ChannelBlack from "./modules/ChannelBlack.vue";
import utils from "../../../common/utils/utils";
import defaultSetting from "../../../common/utils/defaultSetting";
import store from "../../../store";
import QrcodeVue from "qrcode.vue";


export default defineComponent({
  name: "channelManagement",
  components: {
    Statistic,
    ChannelManagemntEdit,
    ChannelType,
    ChannelInfo,
    ChannelReview,
    ChannelBlack,
    QrcodeVue,
  },
  setup() {
    
    const activeKey = ref("info");
    const qrVisible = ref(false);
    const qrChannel = ref("");
    const qrType = ref(1);
    const qrChannelCompany = ref("");
    const qrChannelType = ref(1);

    // 渠道二维码
    const showQrModel = () => {
      let url = `${
          utils.isEnv()
              ? "https://app.kuaijingai.com"
              : defaultSetting.requestDomain
      }/h5/pages/channel/management?org_id=${store.getters.userInfo.org_id}`;
      console.log(url);
      request
          .get("/third", "/transform/url/wxapp", {
            url: url,
            version: "24.3.3",
          })
          .then((res) => {
            qrVisible.value = true;
            if (res.type == "url") {
              qrChannel.value = res.url;
              qrType.value = 1;
            } else if (res.type == "image") {
              qrChannel.value = res.url;
              qrType.value = 2;
            }
          });

      let url1 = `${
          utils.isEnv()
              ? "https://app.kuaijingai.com"
              : defaultSetting.requestDomain
      }/h5/pages/channel/channalCompanyManage?org_id=${store.getters.userInfo.org_id}`;
      console.log(url1);
      request
          .get("/third", "/transform/url/wxapp", {
            url: url1,
            version: "24.3.3",
          })
          .then((res) => {
            qrVisible.value = true;
            if (res.type == "url") {
              qrChannelCompany.value = res.url;
              qrChannelType.value = 1;
            } else if (res.type == "image") {
              qrChannelCompany.value = res.url;
              qrChannelType.value = 2;
            }
          });
    };

    // 下载二维码
    const downloadCode = (index) => {
      request
          .get("/public", "/qrcode", {
            qrCode: index == 1 ? qrChannel.value : qrChannelCompany.value,
          })
          .then((res) => {
            let a = document.createElement("a");
            a.download = "渠道二维码";
            // 设置图片地址
            a.href = res.url;
            a.click();
          });
    };

    const numTitle = ref("待审核");
    const numChange = (val) => {
      console.log(val);
      if (val == 0) {
        numTitle.value = "待审核";
      } else {
        numTitle.value = "待审核" + " (" + val + ")";
      }
    };

    // 渠道类型
    const sourceOptions = ref([]);
    // 来访渠道列表
    const sourceOptionsList = () => {
      request
          .get("/org", "/business/customer/channel/sourceList")
          .then((res) => {
            sourceOptions.value = res.list.map((item) => {
              return {
                value: item.id,
                label: item.source,
              };
            });
          });
    };
    sourceOptionsList();

    // 意向项目
    const optionsBuild = ref([]);
    const getVillageList = () => {
      request.get("/org", "/build/villageAndBuildList/v2", {}).then((res) => {
        let vList = [];
        res.villageList.forEach((item) => {
          vList.push({
            label: item.name,
            value: item.id,
          });
        });
        optionsBuild.value = vList;
      });
    };
    getVillageList();


    return {
      activeKey,
      optionsBuild,
      sourceOptions,
      showQrModel,
      qrVisible,
      qrChannel,
      qrType,
      numTitle,
      numChange,
      downloadCode,
      qrChannelType,
      qrChannelCompany
    };
  },
});
</script>

<style lang="less" scoped>
.acol {
  height: 53px;
  border-right: 3px solid rgba(0, 0, 0, 0.06);
  margin-top: 10px;
  margin-right: 30px;
}

.mobile-W {
  width: 100%;
}

:deep(.ant-tabs-nav-scroll) {
  background: #ffff;
  margin-top: 20px;
}

:deep(.ant-tabs-top-bar) {
  margin-bottom: 0px !important;
}

:deep(.ant-tabs-content) {
  height: 100%;
}

:deep(.ant-tabs-nav) {
  padding: 0 10px;
}
</style>
